import React from 'react';
import i18n from 'i18n-js';
import { View, Image, Text } from "@tarojs/components";
import Modal from './index';
import { GStyleSheet, DynamicColors } from '../../utils/DarkMode';

import offlineIcon from '../../assets/images/img_offline.png';

const dstyles = GStyleSheet.create({
  container: {
    width: 280,
    backgroundColor: DynamicColors.cardBackgroundColor,
    borderRadius: 10,
    flexDirection: 'column',
    paddingTop: 15,
    paddingBottom: 15,
    paddingLeft: 30,
    paddingRight: 30,
  },
  icon: {
    width: 120,
    height: 120,
  },
  title: {
    marginTop: 5,
    fontSize: 18,
    color: DynamicColors.titleTextColor,
    fontWeight: 500,
  },
  content: {
    marginTop: 15,
  },
  contentText: {
    color: DynamicColors.normalTextColor,
    textAlign: 'center',
  },
  bleTip: {
    color: DynamicColors.tintColor,
  }
});

export enum TipTypeEnum {
  none = 0,
  ble = 1 << 0,
  wifi = 1 << 1
}


interface IProps {
  title?: string;
  visible: any;
  tipType: TipTypeEnum;
  onClick?: () => void;
}

class DeviceOffline extends React.Component<IProps> {
  render() {

    const styles = dstyles.style;
    const { title = i18n.t('DEVICE_OFFLINE'), visible, tipType = TipTypeEnum.wifi, onClick } = this.props;
    return (
      <Modal visible={visible} mask>
        <View style={styles.container} className='centerFlex'>
          <Image style={styles.icon} src={offlineIcon} />
          <Text style={styles.title}>{title}</Text>
          <View style={styles.content}>
            {(tipType & TipTypeEnum.wifi) ? <View className='centerFlex'>
              <Text style={styles.contentText}>
                {i18n.t('DEVICE_HAS_BEEN_ENERGIZED')}
                {' '}
                {i18n.t('MAKE_SURE_THE_NETWORK_IS_OPEN')}   
              </Text> 
            </View> : null}
            {(tipType & TipTypeEnum.ble) ? <View className='centerFlex'>
              <Text style={styles.contentText}>
                {i18n.t('CHECK_PHONE_BLUETOOTH_IS_OPEN')}
                {'\n'}
                {i18n.t('KEEP_IN_DIS')}
                {'\n'}
                {'\n'}
              </Text>
            </View> : null}
            {(tipType & TipTypeEnum.ble) ? <View className='centerFlex'>
              <Text style={styles.bleTip} onClick={onClick}>{i18n.t('RETRY_BLE_CONNECT')}</Text>
              {'\n'}
            </View> : null}
          </View>
        </View>
      </Modal>
    );
  }
}

export default DeviceOffline;
